<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加进货记录</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <input type="hidden" :unid="this.getuniddata">
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>食品类型</span>
            <div class="froms">
              <el-radio-group v-model="DemandWarehouse.radio2"  size="mini" @change="radioclick()">
                <el-radio :label="0">预包装食品</el-radio>
                <el-radio :label="1">食用农场品</el-radio>
                <el-radio :label="2">散装加工食品</el-radio>
              </el-radio-group>
            </div>
          </li>
          <li>
            <span><em>*</em>食品类别</span>
             <div class="froms">
             <el-select v-model="DemandWarehouse.Foodtype" placeholder="请选择食品类别">
                <el-option
                  v-for="item in DemandType"
                  :key="item.unid"
                  :value="item.id"
                  :label="item.name">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span><em>*</em>食品名称</span>
            <div class="froms">
              <input type="button" class="text_l" @click="DemandWarehousehandleClick"  v-model="DemandWarehouse.Name">
            </div>
             <mt-popup v-model="DemandWarehouseNamepup" position="right" modal=false class="mint-popup-3">
                  <header class="head">
                  <a class="back tl" @click="clickmodl">
                    <i class="el-icon-arrow-left"></i>
                  </a>
                  <a href="javascript:;" class="tc">
                    <small class="font_18 co_f">食品名称</small>
                  </a>
                </header>
                <main>
                  <div class="seachfrom">
                    <div class="seachbox">
                      <el-input placeholder="请输入内容" v-model="seachtext">
                        <el-button slot="append" icon="search"></el-button>
                      </el-input>
                    </div>
                  </div>
                  <div>
                    <ul class="datalist">
                      <li v-for='(item,index) of getPerson' :foodunid='item.demandType.unid' :foodname="item.name" :foodbrand="item.brand" :foodnorms="item.norms" @click="foodClick(item.name,item.brand,item.norms,item.producers,item.demandType.unid)">
                        <div class="items-img">
                          <img src="../../assets/iconimg.png" />
                        </div>
                        <div class="items-text" >
                          <p>{{item.brand}}</p>
                          <p>名称{{item.name}}</p>
                          <p>类别：{{item.demandType.name}}</p>
                          <p>规格：{{item.norms}}</p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </main>
              </mt-popup>
          </li>
          <li v-if="DemandWarehouse.radio2 ===1||DemandWarehouse.radio2 ===0">
            <span><em>*</em>品牌</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Brand">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0">
            <span><em>*</em>规格净含量</span>
            <div class="froms">
              <input type="text"  v-model="DemandWarehouse.Norms">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2 ===2">
            <span>生产日期批号</span>
            <div class="froms">
              <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="DemandWarehouse.dataValue"
                @click="openPicker()">
              </el-input>
          <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCancel" @confirm="handleConfirm"></mt-datetime-picker>
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2 ===2">
            <span>有效期限</span>
            <div class="froms">
              <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="DemandWarehouse.DeadlineDate"
                @click="openPickerDeadlineDate()">
              </el-input>
            <mt-datetime-picker ref="picker3" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueDeadlineDate" @cancel="handleCancelDeadlineDate" @confirm="handleConfirmDeadlineDate"></mt-datetime-picker>
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2 ===2">
            <span><em>*</em>生产商</span>
            <div class="froms">
              <input type="text"  v-model="DemandWarehouse.Producers">
            </div>
          </li>
          <li>
              <span><em>*</em>供应商</span>
            <div class="froms">
             <el-select v-model="DemandWarehouseSupplier"  placeholder="请选择">
                <el-option
                  v-for="item in Supplierlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                 >
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span><em>*</em>进库数量</span>
            <div class="froms">
               <input type="text"  v-model="DemandWarehouse.Num">
            </div>
          </li>
          <li>
            <span><em>*</em>数量单位</span>
            <div class="froms">
                <input type="text"  v-model="DemandWarehouse.Unit">
            </div>
          </li>
          <li>
            <span>进货日期</span>
            <div class="froms">
             <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="DemandWarehouse.dataValue2"
                @click="openPickerStockDate()">
              </el-input>
               <mt-datetime-picker ref="picker2" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueStockDate" @cancel="handleCancelStockDate" @confirm="handleConfirmStockDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span><em>*</em>记录人员</span>
            <div class="froms">
              <input type="" v-model="DemandWarehouse.RecordPersonName">
           
            </div>
          </li>
          <li>
            <span><em>*</em>记录时间</span>
            <div class="froms">
                {{this.DemandWarehouse.datatime|time}}
            </div>
          </li>
        </ul>
        <div class="uploadbox">
           <i class="el-icon-document"></i>上传购票票据，食品合格证明文件
          <div class="img-btnbox">
           <div class="show">
            <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
          </div>
          <div class="showclick">
            <input type="file"  id="upload" accept="image" @change="upload">
            <label for="upload"></label>
          </div>
          </div>
        </div>
        <div>
          <ul>
            <li v-for='item of FileDatalist' :unid="item.unid" :path="item.fullPath">
              {{item.fullFileName}}
              <el-button type="primary" icon="search"  size="mini" @click="imgview(item.fullPath)" class="c_f">查看</el-button>
              <el-button type="primary" icon="delete2" size="mini" @click="deletefile(item.unid)" class="c_f">删除</el-button>
            </li>
          </ul>
           <mt-popup v-model="popupVisible" modal=false class="mint-popup-2">
               <img src='' id="imgInit">
          </mt-popup>
        </div>
      </div>

    </main>
  </div>
</template>

<script>
//
import {
  DemandType
} from '../../api/api';
import {
  DemandWarehouse
} from '../../api/api';//根据传入的条件获取原料数据列表
import {
  GetGuid
} from '../../api/api';
import {
  CEKeep
} from '../../api/api';//供应商
import {
  UploadSingleFile
} from '../../api/api';
import {
  FileData
} from '../../api/api';
import {
  DeleteFile
} from '../../api/api';
import {
  DatetimePicker
} from 'mint-ui';
import { Popup } from 'mint-ui';
import {
    DemandCertificateAdd
  } from '../../api/api';
var moment = require('moment');
import Exif from 'exif-js';
import DemandWarehouseName from '@/components/jhjllist'
export default {
  name: 'add_mrcj',
  components: {
    'mt-datetime-picker': DatetimePicker,
    'mt-popup':Popup,
    'DemandWarehouseName':DemandWarehouseName
  },
  data() {
    return {
      popupVisible:false,
      DemandWarehouseNamepup:false,
      DemandType: [],
      pickerValue:moment().format('YYYY-MM-DD'),
      pickerValueStockDate:'',
      pickerValueDeadlineDate:'',
      startDate: new Date(),
      CriteriaList: [],
      getPerson:[],
      Supplierlist:[],//供应商
      DemandWarehouseSupplier:'',
      //表单
      DemandWarehouse:{
        radio2:0,
        Foodtype:'',
        Name:'请选择食品名称',
        Brand:'',
        Foodunid:'',
        Norms:'',
        Num:'',
        Producers:'',
        Unit:'',
        RecordPersonName:JSON.parse(localStorage.getItem('auth')).enterpriseName,
        dataValue:'',
        dataValue2:'',
        DeadlineDate:'',
        datatime:this.datatime(),  
      },
   
      msg:'请选择食品名称',
      isShow:true,
      isActive:false,
      seachtext:'',
      //上传图片
      headerImage: '',
      picValue: '',
      //unidoption:'',
      getuniddata: '',
      style: '',
      FileDatalist: [],
    };
  },

  methods: {
        //食品类别
      DemandTypeunid:function(){
      let DemandTypeunid = {
        params: {
          enterpriseUnid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid
        }
      }
      DemandType(DemandTypeunid).then((res) => {
        if (res.success === true) {
         this.DemandType=res.data
        }
      })
      },

     //获取当前时间
      datatime: function() {
        var moment = require('moment');
        var currentdate = moment().format('YYYY-MM-DD hh:mm:ss');
        return currentdate;
      },
    //生产日期时间
    openPicker() {
      this.$refs.picker.open();
    },
    handleCancel() {
      let _this = this
      _this.pickerValue = _this.DemandWarehouse.dataValue
    },
    handleConfirm(val) {
      let _this = this
      _this.DemandWarehouse.dataValue = moment(val).format('YYYY-MM-DD hh:mm:ss')
    },
  //进货日期
   openPickerStockDate() {
      this.$refs.picker2.open();
    },
    handleCancelStockDate() {
      let _this = this
      _this.pickerValueStockDate = _this.DemandWarehouse.dataValue2
    },
    handleConfirmStockDate(val) {
      let _this = this
      _this.DemandWarehouse.dataValue2 = moment(val).format('YYYY-MM-DD hh:mm:ss')
    },
   //有效日期
    openPickerDeadlineDate() {
      this.$refs.picker3.open();
    },
    handleCancelDeadlineDate() {
      let _this = this
      _this.pickerValueDeadlineDate = _this.DemandWarehouse.DeadlineDate
    },
    handleConfirmDeadlineDate(val) {
      let _this = this
      _this.DemandWarehouse.DeadlineDate = moment(val).format('YYYY-MM-DD hh:mm:ss')
    },
    //单选按钮change事件
    radioclick:function(){
     if(this.DemandWarehouse.radio2==0){
        
     }if(this.DemandWarehouse.radio2==1){
      
     }if(this.DemandWarehouse.radio2==2){
       
     }
    },
    //食品名称开始了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    foodClick:function(foodname,foodbrand,foodnorms,producers,foodunid){
        this.DemandWarehouse.Name = foodname;
        this.DemandWarehouse.Brand = foodbrand;
        this.DemandWarehouse.Norms = foodnorms;
        this.DemandWarehouse.Producers= producers
        this.DemandWarehouse.Foodunid= foodunid
        this.clickmodl();
    },
      seach: function () {
      this.listData =[];
      this.CriteriaList[0] ={
        Name : 'EnterprisePerson.Name',
        Value: '%'+this.seachtext+'%',
        Operate:'Like',
        DataType: null,
        EndSuffix: '',
        Suffix:null
      };
      this.DemandWarehouseinfo();
    },
      //弹窗
      DemandWarehousehandleClick: function() {
        this.DemandWarehouseNamepup = true
        this.DemandWarehouseinfo();
      },
      clickmodl:function() {
         this.DemandWarehouseNamepup = false
      },
      //获取item
      peopleClick: function(unid, name) {
        this.institutionPersonname = name;
        this.institutionPersonunid = unid;
        this.clickmodl();
        this.msg = this.institutionPersonname
      },
      DemandWarehouseinfo: function() {
        if(this.DemandWarehouse.Foodtype!=0){
          this.CriteriaList[0]={
                  Name : 'DemandType.Unid',
                  Value:this.DemandWarehouse.Foodtype,
                  Operate:'Equal',
                  DataType: null,
                  EndSuffix: '',
                  Suffix:null
                }
        }
      let varQueryData = {
        PageSize: 100,
        CurrentPage: 1,
        Query: {
          CriteriaList: this.CriteriaList
        }
      }
      let options = {
        params: {
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          QueryData: JSON.stringify(varQueryData)
        }
      }
        //调取接口
        DemandWarehouse(options).then((res) => {
          if (res.success === true) {
            this.user = res.data.user;
            this.getPerson = res.data;
          }
        })
      },
    //食品名称结束了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //获取供应商开始了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Supplier:function(){
      let CEKeepunid = {
        params: {
          userUnid:JSON.parse(localStorage.getItem('auth')).UserUnid
        }
      }
      CEKeep(CEKeepunid).then((res) => {
        if (res.success === true) {
         this.Supplierlist=res.data
        }
      })
      },
     //获取供应商结束了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //提交方法
    submitForm: function() {
      let varDemandWarehouse = {
        DemandType:{
            Unid:this.DemandWarehouse.Foodunid,
          },
        Name:this.DemandWarehouse.Name,
      }
      let varSupper = {
        Unid:this.DemandWarehouseSupplier,
      //  SupplierName:this.DemandWarehouseSupplier.label
      }
       let varEnterpriseUnid = {
          Unid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
          Name:JSON.parse(localStorage.getItem('auth')).enterpriseName,
        }
      let data = {
        Unid:this.getuniddata,
        Type:this.DemandWarehouse.radio2,
        DemandWarehouse:varDemandWarehouse,
        Brand:this.DemandWarehouse.Brand,
        Norms:this.DemandWarehouse.Norms,
        ProductionDate:this.DemandWarehouse.dataValue,
        DeadlineDate:this.DemandWarehouse.DeadlineDate,
        Producers:this.DemandWarehouse.Producers,
        Supplier:varSupper,
        Num:this.DemandWarehouse.Num,
        Unit:this.DemandWarehouse.Unit,
        StockDate:this.DemandWarehouse.dataValue2,
        RecordPersonName:JSON.parse(localStorage.getItem('auth')).enterpriseName,
        RecordPersonUnid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        RecordDate: this.DemandWarehouse.datatime,
        Enterprise:varEnterpriseUnid,
        EnterpriseUnid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
      }
      let dataoption = {
        params: {
          Data: JSON.stringify(data),
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
        }
      }
      //调取接口
      DemandCertificateAdd(dataoption).then((res) => {
        if (res.success === true) {
          this.$message.success('保存成功');
           this.$router.go(-1);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(function() {
        this.$message.error('网络异常。');
      })
    },
    //点击查看
    imgview: function(path) {
      this.popupVisible=true 
      var adres="http://psnffs.com/" + path;
      document.getElementById('imgInit').src = adres;
    },
    //删除
    deletefile: function(unid) {
      let FileDataparam = {
        params: {
          unids: unid
        }
      }
      DeleteFile(FileDataparam).then((res) => {
        if (res.success === true) {
          this.getfilelist()
        }
      })
    },
    //获取32unid
    getunid: function() {
      //调取接口
      GetGuid().then((res) => {
        if (res.success === true) {
          this.getuniddata = res.data;
        }
      })
    },
    //图片上传开始
    upload(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.picValue = files[0];
      this.imgPreview(this.picValue);
    },
    imgPreview(file) {
      let self = this;
      let Orientation;
      //去获取拍照时的信息，解决拍出来的照片旋转问题  
      Exif.getData(file, function() {
        Orientation = Exif.getTag(this, 'Orientation');
      });
      // 看支持不支持FileReader  
      if (!file || !window.FileReader) return;

      if (/^image/.test(file.type)) {
        // 创建一个reader  
        let reader = new FileReader();
        // 将图片2将转成 base64 格式  
        reader.readAsDataURL(file);
        // 读取成功后的回调  
        reader.onloadend = function() {
          let result = this.result;
          let img = new Image();
          img.src = result;
          //判断图片是否大于100K,是就直接上传，反之压缩图片  
          if (this.result.length <= (100 * 1024)) {
            self.headerImage = this.result;
            self.postImg();
          } else {
            img.onload = function() {
              let data = self.compress(img, Orientation);
              self.headerImage = data;
              self.postImg();
            }
          }
        }
      }
    },
    getfilelist() {
      let FileDataparam = {
        params: {
          MainDataUnid: this.getuniddata,//"45958c55136646d099965da7b9001853"
          PageSize: 100,
          CurrentPage: 1
        }
      }
      FileData(FileDataparam).then((res) => {
        if (res.success === true) {
          this.FileDatalist = res.data;
        }
      })
    },
    postImg() {
      //上传图片
      let filecontent = this.headerImage.split('base64,')[1]
      let paramFile = {
        MainDataUnid: this.getuniddata,
        UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
        FileContent: filecontent,
        InFileName: this.picValue.name,
        AliasData: '',
        AliasDataSort: '',
      }

      UploadSingleFile(paramFile).then((res) => {
        if (res.success === true) {
          this.getfilelist();
        }
      })

    },
    rotateImg(img, direction, canvas) {
      //最小与最大旋转方向，图片旋转4次后回到原方向      
      const min_step = 0;
      const max_step = 3;
      if (img == null) return;
      //img的高度和宽度不能在img元素隐藏后获取，否则会出错      
      let height = img.height;
      let width = img.width;
      let step = 2;
      if (step == null) {
        step = min_step;
      }
      if (direction == 'right') {
        step++;
        //旋转到原位置，即超过最大值      
        step > max_step && (step = min_step);
      } else {
        step--;
        step < min_step && (step = max_step);
      }
      //旋转角度以弧度值为参数      
      let degree = step * 90 * Math.PI / 180;
      let ctx = canvas.getContext('2d');
      switch (step) {
        case 0:
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0);
          break;
        case 1:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, 0, -height);
          break;
        case 2:
          canvas.width = width;
          canvas.height = height;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, -height);
          break;
        case 3:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, 0);
          break;
      }
    },
    compress(img, Orientation) {
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext('2d');
      //瓦片canvas  
      let tCanvas = document.createElement("canvas");
      let tctx = tCanvas.getContext("2d");
      let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  
      let ratio;
      if ((ratio = width * height / 4000000) > 1) {
        console.log("大于400万像素")
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
      } else {
        ratio = 1;
      }
      canvas.width = width;
      canvas.height = height;
      //        铺底色  
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      //如果图片像素大于100万则使用瓦片绘制  
      let count;
      if ((count = width * height / 1000000) > 1) {
        console.log("超过100W像素");
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  
        //            计算每块瓦片的宽和高  
        let nw = ~~(width / count);
        let nh = ~~(height / count);
        tCanvas.width = nw;
        tCanvas.height = nh;
        for (let i = 0; i < count; i++) {
          for (let j = 0; j < count; j++) {
            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
          }
        }
      } else {
        ctx.drawImage(img, 0, 0, width, height);
      }
      //修复ios上传图片的时候 被旋转的问题  
      if (Orientation != "" && Orientation != 1) {
        switch (Orientation) {
          case 6: //需要顺时针（向左）90度旋转  
            this.rotateImg(img, 'left', canvas);
            break;
          case 8: //需要逆时针（向右）90度旋转  
            this.rotateImg(img, 'right', canvas);
            break;
          case 3: //需要180度旋转  
            this.rotateImg(img, 'right', canvas); //转两次  
            this.rotateImg(img, 'right', canvas);
            break;
        }
      }
      //进行最小压缩  
      let ndata = canvas.toDataURL('image/jpeg', 0.1);
      console.log('压缩前：' + initSize);
      console.log('压缩后：' + ndata.length);
      console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
      return ndata;
    }
  },
  mounted() {
    this.getunid();
    this.DemandTypeunid();
    this.Supplier();
  }

}
</script>
<style lang="scss">

.uploadbox{ position:relative;    margin:20px 0px; padding-left:10px}
.img-btnbox{
    position: absolute;
    right: 10px;
    top: -5px;
    width:25px;
    height:25px;
    overflow: hidden;
}
.showclick{
    position: relative;
    cursor: pointer;
    color: #888;
    background:url("../../img/add.png") no-repeat;
    background-size:contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input{
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
    }
}
.el-radio__label{margin-top: 2px;}
.disabled{ display:none !important}
.el-message{
  width:85%;
  margin:20px auto;
}
//重构
.items-text{
  p{
    margin: 0em !important;
    padding: 0em !important;
    line-height: 20px;
  }
}
</style>
